<template>
  <view class="detail-wrap">
    <back :back-title="backTitle"></back>
    <view class="detail">
      <view class="detail-top">
        <image :src="info.userPhoto ?info.userPhoto :desc" class="avatar"></image>
        <view class="info">
          <view class="title-wrap">
            <view class="userName">{{info.userName}}</view>
            <view v-if="info.identity" class="icon-title">{{info.identity?info.identity:''}}</view>
            <image :src="info.userSex === 1 ? girl :boy" class="tag"></image>
          </view>
          <view class="info-item">
            <image src="/static/images/address-book/phone.png" class="icon"></image>
            <view class="item-title">电话：{{info.userPhone}}</view>
            <view class="desc"></view>
          </view>
          <view class="info-item">
            <image src="/static/images/address-book/scholl.png" class="icon"></image>
            <view class="item-title">学校：{{info.school}}</view>
            <view class="desc"></view>
          </view>
          
          <view class="info-item">
            <image src="/static/images/address-book/className.png" class="icon"></image>
            <view class="item-title">班级：{{info.className}}</view>
            <view class="desc"></view>
          </view>
        </view>
      </view>
      <view class="button-wrap">
        <view class="btn" @click="handleMessage">
          <view class="desc">发消息</view>
        </view>
        <view class="btn" @click="handleCall">
          <view class="desc">打电话</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'detail',
  data() {
    return {
      backTitle: '个人详情',
      desc: '/static/images/analyze/def_user.png',
      boy: '/static/images/address-book/boy.png',
      girl: '/static/images/address-book/girl.png',
      info: {
        userName: '',
        userSex: 1,
        userPhone: '',
        userId: '',
        identity: '',
        school: '',
        className: '',
        userPhoto: ''
      }
    }
  },
  onLoad(options) {
    const params = options.params
    const info = JSON.parse(params)
    this.initDate(info)
  },
  methods: {
    initDate(info) {
      const userPhoto = unescape(info.userPhoto)
      this.info = Object.assign({}, {...info}, {userPhoto})
    },
    handleCall(){
			const _this = this
      uni.makePhoneCall({
        phoneNumber: _this.info.userPhone
      })
    },
		handleMessage() {
			const {userId, userName,userPhoto} = this.info
			uni.navigateTo({
				url: `/pages/chat/index?userId=${userId}&userName=${userName}&userPhoto=${escape(userPhoto)}`
			})
		}
  }
}

</script>
<style lang='scss' scoped>
.detail-wrap{
  width: 100%;
  min-height: 100vh;
  background-color: #f0f0f0;
  .detail{
    width: 100%;
    padding: 20upx;
    box-sizing: border-box;
    .detail-top{
      width: 100%;
      background-color: #fff;
      border-radius:10upx;
      padding: 32upx 0 36upx 22upx;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      margin-bottom: 43upx;
      .avatar{
        width:125upx;
        height:125upx;
        border-radius:50%;
        margin-right: 40upx;
      }
      .info{
        flex: 1;
        .title-wrap {
          display: flex;
          margin-bottom: 34upx;
          align-items: center;
          .userName{
            font-size:30upx;
            left: 34upx;
            color: #333;
            margin-right: 10upx;
            font-weight: bold;
          }
          .icon-title {
            padding: 10upx 7upx;
            font-size: 20upx;
            color:#fff;
            font-weight: bold;
            margin-right: 20upx;
            background-color: #62D4A0;
            border-radius: 5upx;
          }
          .tag{
            width:34px;
            height:34px;
          }
        }
        .info-item {
          border-bottom :1px solid #F0F0F0;
          height: 86upx;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          flex: 1;
          &:nth-last-of-type(1) {
            border: none;
          }
          .icon{
            width: 60upx;
            height:60upx;
            margin-right: 10upx;
          }
          .item-title {
            font-size:25upx;
            font-weight: bold;
            margin-right: 20upx;
          }
          .desc{
            font-size:25upx;
          }
        }
      }
    }
  }
  .button-wrap{
    width: 100%;
    display: flex;
    justify-content: space-between;
    .btn{
      width:346upx;
      height:92upx;
      text-align: center;
      border-radius:10upx;
      &:nth-of-type(1) {
        background:rgba(98,212,160,1);
      }
      &:nth-of-type(2) {
        background-color: #4495EE;
      }
      .desc{
        font-weight: bold;
        color: #fff;
        font-size: 30upx;
        line-height: 92upx;
      }
    }
  }
}
</style>